import React,{ Component } from 'react'
import PropTypes from 'prop-types';

class UserAdd extends Component {
    constructor(props) {
        super(props)
        this.index = 3
        this.state={
            input: ''
        }
    }
    componentDidMount() {
        this.textInput.focus()
        console.log(React.createElement('div',{className: 'foo'}))
    }
    render() {
        return (
            <div>
                <input onChange={e => {
                    this.setState({input: e.target.value})
                }} placeholder="请输入" ref={(input) => {this.textInput = input}}></input>
                <button onClick={() => {
                    this.context.onAddUser({id: ++this.index, name: this.state.input})
                }}>提交</button>
                <div style={{width: '200px',height: '200px',backgroundColor: "#ccc"}}></div>
            </div>
        )
    }
}

UserAdd.contextTypes = {
    onAddUser: PropTypes.func
}

export default UserAdd